<template>
  <view class='details-container'>
    <view v-if="details + ''">
      <!-- 标题信息 -->
      <view class="title-info">
        <view class="title">{{ details.title }}</view>
        <!-- 除标题以外的信息  发布时间， 点击量 -->
        <view class="other-info">
          <view class="release-time">
            发布时间:
            <text>{{ details.time }} </text>
          </view>
        </view>
      </view>
      <!-- 分割线 -->
      <view class="line"></view>
      <!-- 正文内容-->
      <view class="content">
        <text>
          {{ details.content }}
        </text>
        <text class="content-releaseTime">
          {{ details.time }}
        </text>
      </view>
      <!-- 底部上下页跳转 -->
      <view class="footer">
        <view class="pre-page" @click="goToPage(pre.id)" v-if="pre">
          <navigator url="" hover-class="navigator-hover">
            <button type="default">
              上一页:
              <text class="btn-text">
                {{ pre.title }}
              </text>
            </button>
          </navigator>
        </view>
        <view class="next-page" @click="goToPage(next.id)" v-if="next">
          <navigator url="" hover-class="navigator-hover">
            <button type="default">
              下一页:
              <text class="btn-text">
                {{ next.title }}
              </text>
            </button>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getBulletinDetailAsync, getBulletinListAsync } from '@/api/bulletin.js'
export default {
  data () {
    return {
      details: {},
      list: [],
      pre: '',
      next: '',
      id: ''
    };
  },
  onLoad (options) {
    this.id = options.id
    this.getDetail(this.id)
    this.getList()
  },
  methods: {
    async getDetail (id) {
      try {
        const res = await getBulletinDetailAsync(id)
        this.details = res.data.data
        this.details.time = this.details.time.split('T')[0] + " " + this.details.time.split('T')[1]
      } catch (error) {
        console.log('%c [  ]-83', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }
    },
    async getList () {
      try {
        const res = await getBulletinListAsync()
        this.list = res.data.data

        const index = this.list.findIndex(item =>
          item.id + '' == this.id + ''
        )
        for (let i = 0; i < this.list.length; i++) {
          if (index == i) {
            if (i - 1 >= 0) {
              this.pre = this.list[i - 1]
            }
            if (i + 1 < this.list.length) {
              this.next = this.list[i + 1]
            }
          }
        }
      } catch (error) {
        console.log('%c [  ]-81', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }
    },
    goToPage (id) {

      uni.navigateTo({
        url: `/subpackage/bulletinBoard-details/bulletinBoard-details?id=${id}`
      })
    },



  }

}

</script>

<style lang="scss">
.details-container {
  width: 95%;
  height: auto;
  margin: 10rpx auto;
  background-color: #fff;
  border: 1px gray solid;
  border-radius: 10rpx;
  box-shadow: 0 0rpx 30rpx gray;
  padding: 10rpx 10rpx;

  // 标题
  .title-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .title {
      font-size: 36rpx;
      font-weight: 700;
      line-height: 80rpx;


    }

    .other-info {
      display: flex;
      justify-content: center;
      font-size: 22rpx;
      line-height: 40rpx;
      color: gray;
      width: 100%;

      .release-time {
        text {
          margin-left: 10rpx;
        }
      }

      .click-number {
        text {
          margin-left: 10rpx;
        }
      }
    }
  }

  // 分割线
  .line {
    width: 99%;
    height: 1px;
    border-bottom: 2rpx dashed gray;
    margin: 30rpx 0;
  }

  // 正文内容
  .content {
    display: flex;
    flex-direction: column;
    font-size: 30rpx;
    text-indent: 36rpx;
    margin-bottom: 80rpx;

    .content-releaseTime {
      margin-top: 20rpx;
      flex: 1;
      align-self: flex-end;
      padding-right: 10rpx;
      height: 40rpx;
      line-height: 40rpx;
    }
  }

  // 底部
  .footer {
    padding: 10rpx 0;

    .pre-page {
      button {

        text-align: left;
        font-size: 32rpx;
        font-weight: 700;
        background: skyblue;
        color: white;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        text {
          margin-left: 10rpx;
          font-weight: normal;
          font-size: 28rpx;
        }
      }
    }

    .next-page {
      button {
        text-align: left;
        font-size: 32rpx;
        font-weight: 700;
        background: skyblue;
        color: white;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        text {
          margin-left: 10rpx;
          font-weight: normal;
          font-size: 28rpx;
        }
      }
    }

  }
}
</style>
